<template>
	<view>
		<view class="swiper" v-animate-on-scroll>
		  <u-swiper :list="datalist.imageUrl" :height="420"></u-swiper>
		</view>
		<view class="content">
			<view class="title">{{datalist.title}}</view>
			<view class="time">
			  活动时间：{{datalist.startTime + '-' + datalist.endTime}}
			</view>
			<view class="quota">
				剩余名额：{{datalist.quota - datalist.registered}} 
			</view>
			<view class="quota">
				活动性质：{{datalist.paymentType == 0 ? '免费' : '收费'}}
			</view>
			<view class="prce">
				<view>{{datalist.paymentType == 0 ? '免费' : (datalist.paymentType == 1 ? datalist.paymentAmount + '积分' : '￥' + datalist.paymentAmount )}}</view>
			</view>
		</view>
		<view class="fwconten">
			<view class="rules">
				活动规则
			</view>
			<view class="u-content">
			  <u-parse :html="datalist.activityRules"></u-parse>
			</view>
			<view class="rules">
				活动详情
			</view>
			<view class="u-content" style="padding: 0 30rpx 30rpx;min-height: 360rpx;">
			  <u-parse :html="datalist.activityDetails"></u-parse>
			</view>
		</view>
		<view class="cofitng">
			<view class="prce">
				<view>{{datalist.paymentType == 0 ? '免费' : (datalist.paymentType == 1 ? datalist.paymentAmount + '积分' : '￥' + datalist.paymentAmount )}}</view>
			</view>
			<view class="btn" @click="Redeem(datalist)">立即报名</view>
		</view>
		<Butogin :zheshow='zheshow' @colse="(e)=> zheshow = false"/>
	</view>
</template>

<script>
	import {  activityinfo } from '@/core/api/index.js'
	import { mapState } from 'vuex';
	export default{
		data(){
			return{
				datalist:{},
				zheshow:false
			}
		},
		onLoad(r) {
			console.log(r)
			this.ActivityInfo(r.id)
		},
		computed: {
		  ...mapState({
		    userInfo: state => state.user.userInfo
		  })
		},
		methods:{
			async ActivityInfo(id){
				const { data } = await activityinfo(id)
				  if (data && data.imageUrl && Array.isArray(data.imageUrl)) {
				    data.imageUrl = data.imageUrl.map(url => {
				      // 确保每个URL都以https开头
				      if (url && !url.startsWith('http')) {
				        return 'https:' + url
				      }
				      return url
				    })
				  }
				  
				  this.datalist = data
				  console.log('处理后的datalist:', this.datalist)
			},
			Redeem(item){
				if(!this.userInfo.phone) return this.zheshow = true
				uni.navigateTo({
					url:'/pages/activity/registration?itme=' + encodeURIComponent(JSON.stringify(item)) + '&meng=' +  (this.datalist.quota == '不限' ? '不限' :  (this.datalist.quota - this.datalist.registered))
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		background-color: #fff;
		padding: 10rpx 30rpx 30rpx;
		position: relative;
		.title , .time{
		  // padding-left: 30rpx;
		}
		.title{
		  font-size: 32rpx;
		  margin: 10rpx 0 0rpx;
		}
		.time{
		  color: #666666;
		  font-size: 26rpx;
		  margin: 15rpx 0 0;
		}
		.quota{
			margin: 15rpx 0;
			color: #666666;
			font-size: 26rpx;
		}
		.prce{
			position: absolute;
			right: 5%;
			top: 50%;
			font-size: 30rpx;
			font-weight: 600;
			color: #F26B2E;
		}
	}
	.fwconten{
		padding: 40rpx 0 203rpx 0;
		min-height: 600rpx;
		margin-top: 30rpx;
		// padding-bottom: 150rpx;
		.rules{
			font-weight: 600;
			font-size: 29rpx;
			background-color: #fff;
			padding: 40rpx 30rpx 0 30rpx;
			padding-bottom: 10rpx;
		}
		.u-content{
			color: #666666;
			font-size: 28rpx;
			line-height: 43rpx;
			padding: 0 30rpx;
			// margin-bottom: 30rpx;
			background-color: #fff;
		}
	}
	.cofitng{
		position: fixed;
		    bottom: 0%;
			background-color: #fff;
		left: 50%;
		display: flex;
		transform: translate(-50%,0%);
		    align-items: center;
		width: 100%;
		justify-content: space-between;
		padding: 30rpx 30rpx;
		.prce{
			// position: absolute;
			// right: 5%;
			// top: 50%;
			font-size: 30rpx;
			font-weight: 600;
			color: #F26B2E;
		}
	}
	.btn{
		width: 248rpx;
		height: 80rpx;
		background-color: #EC691B;
		// margin-top: 47rpx;
		color: #fff;
		line-height: 80rpx;
		// margin: 50rpx auto;
		border-radius: 50rpx;
		text-align: center;
	}
</style>